<template>
  <li ref="block" class="card-block" :class="{'no-top-border': noTopBorder}">
    <div class="card-block__left">
      <img :src="imgUrl" alt="">
      <div class="badge-wrap">
        <slot name="badage"></slot>
      </div>
    </div>
    <div class="card-block__right">
      <div class="info-name">
        <slot name="name"></slot>
      </div>
      <slot name="tags"></slot>
      <div class="info-data">
        <slot name="data">内容</slot>
      </div>
    </div> 
  </li>
</template>

<script>
export default {
  name: 'cardBlock',
  props: {
    imgUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      noTopBorder: false
    }
  },
  components: {
  },
  filters: {
  },
  methods: {
  },
  computed: {
  },
  mounted() {
    if (!this.$refs.block.previousSibling) {
      this.noTopBorder = true
    }
  },
  created() {
    // console.log(spotLinkImg)
  }
}
</script>
<style lang="scss" scoped>
.card-block{
  width:100%;
  display:flex;
  flex-flow: row nowrap;
  margin: 0;
  padding: 0.8rem 0 0.5rem 0;
  border-top:1px solid #f6f6f6; 
  //background:yellow;
  &__left{
    position:relative;
    flex: 0 0 21.5%;
    width: 21.5%; 
    margin-right: 0.8rem;
    img{
      display:block;
      width:100%;
      height:auto;
    }
    .badge-wrap{
      position: absolute;
      left:0; right:0;
      top:0; bottom:0; 
    }
  }
  &__right{
    //background:red;
    flex: 1;
    padding:0rem 0.5rem 0rem 0;
    .info-name{
      //margin-bottom: 2px;
    }
    .info-data{
      margin-top:2px;
    }
  }
}.no-top-border{
  border-top:1px solid transparent;
}
</style>
